<script>
// 引入 mapActions 和 mapGetters 帮助方法
import { mapActions, mapGetters } from 'vuex';
export default {
  name: "cardStyle",
  data() {
    return {
      cardShadow: this.$store.getters.theme.cardShadow,
      cardBgColor: this.$store.getters.theme.cardBgColor,
      cardBorderColor: this.$store.getters.theme.cardBorderColor,//边框颜色
      cardBorder: this.$store.getters.theme.cardBorder,
      //怎么加判断 如果this.$store.getters.theme.cardFontSize 为空则默认14
      cardFontSize: this.$store.getters.theme.cardFontSize || 16, //字体大
    }
  },
  computed: {
    // 使用 mapGetters 将 dataModule 模块中的 getData getter 映射为组件的计算属性
    ...mapGetters('themeStyle', ['getThemeStyle'])
  },
  methods: {
    // 使用 mapActions 将 themeStyle 模块中的 saveThemeStyle action 映射为组件的方法
    ...mapActions('themeStyle', ['saveThemeStyle']),
    //   修改样式方法
    //修改卡片阴影
    updateCardShadow(val) {
      this.cardShadow = val
      this.$store.dispatch('themeStyle/saveThemeStyle', {
        cardShadow: val // 例如，将 cardShadow 的值更新为 2
      });
    },
    //修改卡片边框存入vuex
    updateCardBorder(value) {
      // 更新 cardBorder 值
      this.cardBorder = value;
      this.$store.dispatch('themeStyle/saveThemeStyle', {
        cardBorder: value // 例如，将 cardBorder 的值更新为 2
      });
    },
    //修改卡片背景颜色
    updateCardBgColor(value) {
      // 更新 cardBgColor 值
      this.cardBgColor = value;
      this.$store.dispatch('themeStyle/saveThemeStyle', {
        cardBgColor: value // 例如，将 cardBgColor 的值更新为 '#ff0000'
      });
    },
    //修改卡片边框颜色
    updateCardBorderColor(value) {
      // 更新 cardBorderColor 值
      this.cardBorderColor = value;
      this.$store.dispatch('themeStyle/saveThemeStyle', {
        cardBorderColor: value // 例如，将 cardBorderColor 的值更新为 '#ff0000'
      });
    },
    //修改字体大小
    updateCardFontSize(value) {
      // 更新 fontSize 值
      this.cardFontSize = value;
      this.$store.dispatch('themeStyle/saveThemeStyle', {
        cardFontSize: value // 例如，将 fontSize 的值更新为 20
      });
    }
  }
}
</script>

<template>
  <div class="change-card-css">
    <el-row>
      <el-col :span="24" class="style-item">
        <b>卡片阴影: </b>
        <el-input-number @change="updateCardShadow" style="width: 40%" v-model="cardShadow" :min="0" :max="30" label="阴影" />
      </el-col>
      <el-col :span="24" class="style-item">
        <b>卡片边框: </b>
        <el-input-number @change="updateCardBorder" style="width: 40%" v-model="cardBorder" :min="0" :max="30" label="阴影" />
      </el-col>
      <el-col :span="24" class="style-item">
        <b>字体大小: </b>
        <el-input-number @change="updateCardFontSize" style="width: 40%" v-model="cardFontSize" :min="0" :max="30" label="字体大小" />

      </el-col>
      <el-col :span="24" class="style-item">
        <b>卡片背景颜色: </b>
        <el-color-picker class="colorPicker" v-model="cardBgColor" @change="updateCardBgColor"></el-color-picker>
      </el-col>
      <el-col :span="24" class="style-item">
        <b>卡片边框颜色: </b>
        <el-color-picker v-model="cardBorderColor" @change="updateCardBorderColor"></el-color-picker>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.style-item {
  margin-top:15px;
  display: flex;
  align-items: center;
  b {
    margin-right: 20px;
  }
}
</style>
